<template>
  <div class="item">
    <div class="item-left">
      <!--  获取到父组件传过来的数据进行渲染    -->
      <input type="checkbox" :checked="item.done" @click="changeChecked(item)">
      <span>{{item.work}}</span>
    </div>
    <div class="item-right">
      <button class="del" @click="delItem(item)">删除</button>
    </div>
  </div>
</template>



<script>
 export default {
    data(){
      return{
         num:0
      }
    },
    props:['item'],
    computed:{

     },
   methods:{

     delItem(item){
       if(item.done){
          this.$bus.$emit('deleteItem',item)
       }
     },

     changeChecked(value){
        this.$bus.$emit('changeChecked',value)
     }



   }

 }
</script>

<style scoped>
.item{
  padding: 7px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
}
.del{
  visibility: hidden;
  opacity: 0;
  background-color: #E65B46FF;
  color: #fff;
  font-size: 12px;
  border: 0;
  width: 38px;
  height: 22px;
  border-radius: 3px;


}
.item:hover{
  background-color: #c2c2c2;
}
.item:hover .del{
  visibility: visible;
  opacity: 1;
  cursor: pointer;
}
</style>